<template>
  <div class="d-layout-body chapter-tree">
    <slot name="layout-side">
      <div v-if="list && list.length > 0" class="d-layout-side">
        <list-menu :data="list" :class-name="sideMenuClass" @onClickItem="handleClickItem" />
      </div>
    </slot>
    <slot name="layout-content">
      <div class="d-layout-content">
        <slot name="contenter">
          <div class="d-contenter">
            <router-view :key="$route.fullPath" />
          </div>
        </slot>
      </div>
    </slot>
  </div>
</template>

<script>
import { PanerGrid } from '@daelui/vdog/dist/pages'
import { Grid, GridColumn, FormCalendar, Pager, ListMenu } from '@daelui/vdog/dist/components'
import { RefreshIcon, PlusIcon, EditIcon, DeleteIcon, TreeIcon } from '@daelui/vdog/dist/icons'
import navSer from '@/service/action/nav.action.js'
import { treer } from '@daelui/dogjs/dist/components'

export default {
  components: {
    PanerGrid,
    Grid,
    GridColumn,
    RefreshIcon,
    PlusIcon,
    EditIcon,
    DeleteIcon,
    TreeIcon,
    FormCalendar,
    Pager,
    ListMenu
  },

  data () {
    return {
      navId: '', // 章节id
      pageId: '', // 页面id
      // 左菜单列表
      list: [],
      sideMenuClass: ''
    }
  },

  methods: {
    /**
     * @function 初始化视图
    */
    initView () {
      let params = this.$route.params
      this.pageId = params.id
      if (!params.navId) {
        this.$router.push(this.getMicroRoute('/dview/nav/list'))
      } else {
        this.navId = params.navId
        this.loadItem(params.navId)
      }
    },
    /**
     * @function 加载数据
    */
    loadItem (navId) {
      navSer.queryListTree({ id: navId }).then(res => {
        let list = res.data.list
        list = Array.isArray(list) ? list : []
        treer.forEach(list, function (item) {
          item.text = item.name
        })
        this.list = list
      })
    },
    handleClickItem (item) {
      if (this.pageId === item.pageId) {
        return true
      }
      let path = `/dview/nav/tree/${this.navId}/view/${item.pageId}`
      this.$router.push(this.getMicroRoute(path))
      this.pageId = item.pageId
    }
  },

  mounted () {
    this.initView()
  }
}
</script>

<style scoped>
.d-form-label {
  width: 80px;
}
</style>

<style lang="less">
.chapter-tree {
  .d-layout-side {
    position: relative;
    margin-right: 8px;
    padding-bottom: 42px;
    background: #fff;
    border: 1px solid #e0e0e0;
    & + .d-layout-content {
      & > .d-contenter {
        padding: 0;
      }
    }
  }
  .chapter-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    .d-text-linker {
      margin: 0 4px;
    }
  }
}
</style>
